<template>
	<view class="container">
		<view class="top_view">
			<view class="nav_view">
				<view class="">
					<u-image src="@/static/images/smartLock/backBtn.png" mode='fit' width="30" height="30"
						@click="leftbackAction()"></u-image>
				</view>
				<view class="address_view" @click="tenantAction()">
					{{ tenantName }}
					<image src="@/static/images/smartLock/addressIcon.png" mode=""
						style="width: 30rpx;height: 25rpx;margin-left: 10rpx;"></image>
				</view>
			</view>
			<view class="simpleArea_view">
				<view class="headPortrait_view" v-show="!isShowAvatar">
					{{sliceUserName()}}
				</view>
				<u-avatar class="headPortrait_view T20M" v-show="isShowAvatar" :src="userInfo.avatar"></u-avatar>
				<view class="name_view">
					<view class="Text77">{{sUserInfo.realName}}</view>
					<view class="Text99">下午好，互联全天候为您守护</view>
				</view>
			</view>

			<view class="search_view" @click="searchAction()">
				<u-image src="@/static/images/smartLock/searchView.png" mode='fit' width="100%" height="90"></u-image>
			</view>
			<view class="workbench_view box_view" style="margin-top: 10rpx;">
				<view class="item_view" v-for="(item,index) in workBenchList" :key="index"
					@click="workBenchAction(index)">
					<view class="icon_view">
						<u-image :src="item.icon" width="40px" height="40px"></u-image>
					</view>
					<view class="title_view">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="control_view box_view">
			<view class="control_top_view">
				<view class="Text88">
					我的门禁卡
				</view>
				<u-icon name="arrow-right" label="查看全部" label-pos="left" color="#8A8A8A" size="24" label-color="#8A8A8A"
					label-size="24" @click="cardListAction()"></u-icon>
			</view>
			<view class="content_view" v-if="cardList.length > 0">
				<view class="swiper_view" @click="cardShowAction()">
					<u-image class="card_image" :src="cardList[cardIndex].cardColor" mode='fit' width="100%"
						height="340rpx" :show-loading="false"></u-image>
					<view class="swiper_card_view">
						<view class="Text88" style="color: #FFFFFF;">
							{{ cardList[cardIndex].cardName }}
						</view>
						<view class="Text99" style="color: #FFFFFF;font-weight: 400;font-size: 24rpx;">
							{{ cardList[cardIndex].deviceName }}
						</view>
					</view>
				</view>
				<view class="arrow_left_view" @click="cardLeftAction()">
					<u-image src="@/static/images/smartLock/whiteLeft.png" mode='fit' width="100%"
						height="100%"></u-image>
				</view>
				<view class="arrow_right_view" @click="cardRightAction()">
					<u-image src="@/static/images/smartLock/whiteRight.png" mode='fit' width="100%"
						height="100%"></u-image>
				</view>
			</view>
			<view class="content_view" v-else>
				<view class="swiper_view">
					<u-image src="@/static/images/smartLock/cardColor0.png" mode='fit' width="100%"
						height="340rpx"></u-image>
					<view style="position: absolute;left: 22%;top: 17%;">
						<view class="Text77" style="color: #FFFFFF;">
							无门禁关联
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="control_view box_view">
			<view class="control_top_view">
				<view class="Text88">
					我的锁具
				</view>
				<u-icon name="arrow-right" label="查看全部" label-pos="left" color="#8A8A8A" size="24" label-color="#8A8A8A"
					label-size="24" @click="lockListAction()"></u-icon>
			</view>
			<view class="content_view">
				<view class="swiper_view">
					<u-image src="@/static/images/smartLock/lockBg.png" mode='fit' width="100%"
						height="160rpx"></u-image>
					<view class="swiper_lock_view" @click="lockShowAction()">
						扫码开锁
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				tenantName: '',
				tenantId: '',
				keyword: '',
				workBenchList: [{
						icon: '/static/images/smartLock/lockRecord.png',
						name: '门锁记录'
					},
					{
						icon: '/static/images/smartLock/limitApply.png',
						name: '权限申请'
					}
				],
				cardList: [],
				cardIndex: 0,
				userInfo: {}, // 杰能用户信息
				sUserInfo: {}, // 智能锁用户信息
			}
		},
		onShow() {
			var that = this
			uni.$on('seletedTenant', function(e) {
				that.tenantName = e.tenantName
				that.tenantId = e.tenantId
				that.pageNum = 1
				that.getNoticeListData()
			})
		},
		onLoad() {
			let sUserInfo = this.$storage.getStorageDataSync("sUserInfo")
			this.tenantId = sUserInfo.tenantId
			this.tenantName = sUserInfo.tenantName
			this.getInfo()
			this.getSmartInfo()
			this.getAllDictData()
			this.getCardListData()
		},
		computed: {
			isShowAvatar() {
				return this.userInfo.avatar && this.userInfo.avatar.length > 0;
			}
		},
		methods: {
			leftbackAction() {
				plus.runtime.quit();
			},
			tenantAction() {
				this.$Router.push({
					name: 'tenantIndex'
				})
			},
			searchAction() {
				this.$Router.push({
					name: 'searchIndex'
				})
			},
			workBenchAction(index) {
				let routerName = index == 0 ? 'lockRecordIndex' : 'limitApplyIndex'
				this.$Router.push({
					name: routerName
				})
			},
			cardListAction() {
				this.$Router.push({
					name: 'cardList',
					params: {
						dataList: this.cardList
					}
				})
			},
			cardShowAction() {
				this.$Router.push({
					name: 'cardShow',
					params: {
						dataList: this.cardList,
						cardIndex: this.cardIndex
					}
				})
			},
			cardLeftAction() {
				if (this.cardIndex > 0) {
					this.cardIndex -= 1
				}
			},
			cardRightAction() {
				if (this.cardIndex < this.cardList.length - 1) {
					this.cardIndex += 1
				}
			},
			lockListAction() {
				this.$Router.push({
					name: 'lockList'
				})
			},
			lockShowAction() {
				this.$Router.push({
					name: 'lockOpen'
				})
			},
			// 获取杰能用户信息
			getInfo() {
				if (this.$storage.getStorageDataSync("userInfo")) {
					this.userInfo = this.$storage.getStorageDataSync("userInfo")
				} else {
					plus.runtime.quit();
				}
			},
			// 获取智能锁用户信息
			getSmartInfo() {
				if (this.$storage.getStorageDataSync("sUserInfo")) {
					this.sUserInfo = this.$storage.getStorageDataSync("sUserInfo")
				} else {
					plus.runtime.quit();
				}
			},
			// 分割用户名称-取后两位
			sliceUserName() {
				if (Object.keys(this.sUserInfo).length == 0) {
					return
				}
				let name = this.sUserInfo.realName
				if (name.length <= 2) {
					return name
				} else {
					let length = name.length
					return name.slice(length - 2)
				}
			},
			getAllDictData() {
				var that = this
				this.$apis.getAllDict().then(result => {
					if (result.res.data.code == '200') {
						that.dataModel = result.res.data.data
					} else {
						that.$show.toastMessage(result.res.data.msg);
					}
				})
			},
			getCardListData() {
				var that = this
				this.$apis.getCardList({
					tenantId: this.sUserInfo.tenantId,
					pageNum: 1,
					pageSize: 999
				}).then(result => {
					if (result.res.data.code == '200') {
						that.cardList = result.res.data.rows;
						that.cardList.forEach((item, index) => {
							var idx = index % 6
							item.cardColor = `/static/images/smartLock/cardColor${idx + 1}.png`
						})
					} else {
						that.$show.toastMessage(result.res.data.msg);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card_image {
		will-change: transform;
	}

	.container {
		width: 100%;
		min-height: 100vh;
		background-color: #F8F8F8;
		box-sizing: border-box;
	}

	.simpleArea_view {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
	}

	.headPortrait_view {
		height: 80rpx;
		width: 80rpx;
		background: linear-gradient(180deg, #7598FF 0%, #4168DF 100%);
		border-radius: 100%;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		color: $--color-Text-1;
	}

	.name_view {
		display: flex;
		flex-flow: column nowrap;
		margin-left: 24rpx;
		justify-content: space-between;
	}

	.top_view {
		width: 100%;
		padding-top: calc(env(safe-area-inset-top) + 80rpx);
		background: linear-gradient(to bottom, #D0D8F4, #F8F8F8);

		.nav_view {
			width: 100%;
			height: 80rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
		}

		.search_view {
			width: 100%;
			height: 100%;
			padding: 0 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.info_view {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;

			.head_view {
				width: 80px;
				height: 80px;
			}
		}

		.workbench_view {
			display: flex;
			flex-direction: row;

			.item_view {
				width: 90px;
				height: 100%;

				.icon_view {
					width: 100%;
					height: 60%;
					margin-bottom: 10rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}

				.title_view {
					width: 100%;
					height: 40%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					color: #333333;
					font-size: 26rpx;
				}
			}
		}
	}

	.box_view {
		padding: 10px;
		margin: 20rpx 30rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
	}

	.control_view {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.control_top_view {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.content_view {
			width: 100%;
			height: 100%;
			margin: 20rpx 0;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			position: relative;

			.arrow_left_view {
				width: 40rpx;
				height: 100rpx;
				position: absolute;
				left: 0;
				top: calc(50% - 50rpx);
			}

			.arrow_right_view {
				width: 40rpx;
				height: 100rpx;
				position: absolute;
				right: 0;
				top: calc(50% - 50rpx);
			}

			.swiper_view {
				width: 100%;
				height: 100%;
				position: relative;

				.swiper_card_view {
					position: absolute;
					left: 22%;
					top: 12%;
				}

				.swiper_lock_view {
					line-height: 34rpx;
					padding: 10rpx 26rpx;
					color: #FFFFFF;
					font-size: 24rpx;
					border-radius: 43rpx;
					border: 2rpx solid #FFFFFF;
					position: absolute;
					right: 5%;
					top: calc(50% - 30rpx);

				}
			}
		}
	}


	// /deep/.u-icon__icon {
	// 	font-size: 50rpx !important;
	// }
</style>